CSS Dersleri Bölüm 4 – Yazıların stillendirilmesi

CSS Dersleri Bölüm 4 – Yazıların stillendirilmesi

Text Color (Yazı rengi)

Renk özelliği yazının rengini değiştirebilmek için kullanılır.

CSS ile bir renk;

• Bir hex değeri “#ff0000”
• Bir rgb değeri “rgb(255,0,0)”
• Bir renk ismi “red” ile tanımlanır.

CSS renk değerlerine ait referans Css derslerinin bitiminde verilecektir.

Sayfanın varsayılan rengi body seçicisinde tanımlanır. Misal;

body {color:blue;}
 h1 {color:#00ff00;}
 h2 {color:rgb(255,0,0);}

W3C’nin css bildirisine göre; Color özelliğini verdiyseniz, background-color özelliğini de vermek zorundasınız.

Text Alignment (Yazı hizalama)

text-align özelliği yazının yatay hizalamasının ayarını tanımlar.

Yazı merkeze alınabilir veya sağa/sola hizalanabilir ve yahut iki tarafa hizalanabilir.

text-align, justify olarak belirlendiğinde ,her satır genişler iki yana yaslanmak için satır genişliğince ve sol ve sağ margin düz olur dergilerdeki ve gazetelerdeki gibi.

Text Decoration

text-decoration özelliği ile yazı süslemelerinin ekleyebilir ya da kaldırabilirsiniz.

text-decoration özelliğiyle,  tasarım amaçları arasında kullanım olarak alt çizgileri kaldırmaktır. Misal;

a {text-decoration:none;}

Hatta yazıyı süslemek için de kullanılır;

h1 {text-decoration:overline;}
 h2 {text-decoration:line-through;}
 h3 {text-decoration:underline;}
 h4 {text-decoration:blink;}

Bağlantı içermeyen yazılar için altçizgi eklemek doğru bir davranış değildir. Kullanıcının kafasını karırştırır.

Text Transformation

text-transform özelliği büyük boy ve küçük boy harflere çevirmeyi sağlar yazıda.

Her kelimenin ilk harfini büyük yapar, ya da tüm harfleri büyültür ya da küçültür. Misal;

p.uppercase {text-transform:uppercase;}
 p.lowercase {text-transform:lowercase;}
 p.capitalize {text-transform:capitalize;}

Text-Indentation

text-indentation özelliği bir yazının ilk satırırının girintisini tanımlamak için kullanılır.

p {text-indent:50px;}

Ve örnekler ile uygulamaların daha fazlası;

Karakterler arasındaki boşluğu tanımlama
Karakterler arasındaki boşluğun nasıl artırılıp azaltılacağını gösterir.
Satırlar arası boşluk
Bir paragraftaki satırlar arası boşluğu tanımlar.

Bir elemente ait yazı yönünü tanımlar
Bir elemente ait yazının yönünün nasıl değiştirileceğine dair uygulama

Kelimeler arası beyaz alanının artırılması
Bir paragraftaki kelimeler arası beyaz alanın nasıl artırılacağına dair uygulama

Bir element içindeki yazıya ait yazı sarmalını kaldırma
Bir element içindeki yazının text Wrap özelliğini kaldırma uygulaması.

Bir resmin dikey hizalaması
Bir yazıdaki resmin dikey olarak nasıl hizalanacağını belirleyen uygulama.

Tüm CSS Text(yazı) Özellikleri